<template>
  <div>
    <div class="search_form">
			<div>
        <el-date-picker
          v-model="searchForm.workDate"
          type="date"
          size="mini"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
				<el-select
					size="mini"
					clearable
					placeholder="请选择班次"
					v-model="searchForm.workTime"
					class="others"
					popper-class="selectClass"
				>
					<el-option v-for="(item, index) in workTimeList" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
				</el-select>

				<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="searchData">查询</el-button>
			</div>
      <div>
        <el-button v-hasPermi="['productManagement:secondryDispenser:insert']" type="primary" size="mini" @click="machineHandlerClick">机械配工</el-button>
        <el-button v-hasPermi="['productManagement:secondryDispenser:insertLabor']" type="primary" size="mini" @click="labourHandlerClick">劳务配工</el-button>
        <el-button v-hasPermi="['productManagement:secondryDispenser:insertFum']" type="primary" size="mini" @click="fumigationHandlerClick">熏蒸配工</el-button>
      </div>
    </div>
    <div>
      <el-tabs v-model="activeNameT" type="card" @tab-click="handleClick(activeNameT)">
        <el-tab-pane label="船舶计划" name="first">
          <!-- 主列表table -->
          <BaseTable 
            ref="ship"
            :loading="loading"
            :data="tableData"
            :columns="columns" 
            :tableHeight="tableHeight" 
            @details="handlerClick" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
        <el-tab-pane label="零工计划" name="second">
          <BaseTable 
            :loading="oddJobloading"
            :data="oddJobTableData"
            :columns="oddJobColumns" 
            :tableHeight="tableHeight" 
            @details="oddJobhandlerClick" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
        <el-tab-pane label="集疏港计划" name="third">
          <BaseTable 
            :loading="openPortloading"
            :data="openPortTableData"
            :columns="openPortColumns" 
            :tableHeight="tableHeight" 
            @details="openPorthandlerClick" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
        <el-tab-pane label="转运计划" name="four">
          <BaseTable 
            :loading="transshipmentloading"
            :data="transshipmentTableData"
            :columns="transshipmentColumns" 
            :tableHeight="tableHeight" 
            @details="transshipmenthandlerClick" 
            :pagination="false"></BaseTable>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <el-tabs v-model="activeNameD" type="card" @tab-click="dhandleClick(activeNameD)">
        <el-tab-pane label="已派劳务" name="first">
          <!-- 主列表table -->
          <BaseTable 
            :data="labourTableData"
            :columns="labourColumns" 
            :tableHeight="tableHt" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
        <el-tab-pane label="已派机械" name="second">
          <!-- 主列表table -->
          <BaseTable 
            :data="machineTableData"
            :columns="machineColumns" 
            :tableHeight="tableHt" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
        <el-tab-pane label="已派熏蒸" name="third">
          <BaseTable 
            :data="fumigationTableData"
            :columns="fumigationColumns" 
            :tableHeight="tableHt" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-drawer title="机械配工" :visible.sync="isShow" size="70%">
      <div v-if="isShow" class="drawerContent">
        <machinedispenser :shipInfo="shipInfo" :colseDrawer="colseDrawer"></machinedispenser>
      </div>
    </el-drawer>
    <el-drawer title="劳务配工" :visible.sync="isShowLabour" size="30%">
      <div v-if="isShowLabour" class="drawerContent">
        <labourdispenser :labourInfo="labourInfo" :colseDrawer="colseDrawer"></labourdispenser>
      </div>
    </el-drawer>
    <el-drawer title="熏蒸配工" :visible.sync="isShowFumigation" size="30%">
      <div v-if="isShowFumigation" class="drawerContent">
        <fumigationdispenser :fumigationInfo="fumigationInfo" :colseDrawer="colseDrawer"></fumigationdispenser>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public/index'
import machinedispenser from './subPage/machinedispenser.vue'
import labourdispenser from './subPage/labourdispenser.vue'
import fumigationdispenser from './subPage/fumigationdispenser.vue'
import api from '@/api/Product/secondryDispenser/index'
export default {
  components: { BaseTable, machinedispenser,labourdispenser,fumigationdispenser },
  data () {
    return {
      searchForm: {
        workDate: '',
        workTime: '01',
      },
      workTimeList: [], // 班次
      loading: false,
      activeNameT: 'first',
      activeNameD: 'second',
      tableHeight: window.innerHeight - 490,
      tableHt: window.innerHeight - 480,
      tableData: [],
      columns: [
        {
          prop: 'planNo',
          label: '编号',
          width: 140
        },
        {
          prop: 'processName',
          label: '作业过程'
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
          width: 120
        },
        {
          prop: 'cargoCategoryName',
          label: '货种'
        },
        {
          prop: 'customerName',
          label: '客户名称',
          isShort: true,
        },
        {
          prop: 'loadUnload',
          label: '装卸'
        },
        {
          prop: 'berthNo',
          label: '泊位'
        },
        {
          prop: 'storehouseName',
          label: '库场'
        },
        {
          prop: 'deptName',
          label: '作业工段',
          width: 130
        },
        {
          prop: 'cooperationName',
          label: '协力队',
          width: 130
        },
        {
          prop: 'tallyFront',
          label: '前沿',
          width: 130
        },
        {
          prop: 'transport',
          label: '转运',
          width: 130
        },
        {
          prop: 'tallyBack',
          label: '后场',
          width: 130
        },
        {
          prop: 'supporting',
          label: '辅助',
          width: 130
        },
        {
          prop: 'laborDispatch',
          label: '劳务',
          width: 130
        },
        {
          prop: 'foreignTallyCompanyName',
          label: '外理单位'
        },
        {
          prop: 'tallyClerk',
          label: '理货员'
        },
        {
          prop: 'instructorName',
          label: '指导员',
          width: 130
        },
        {
          prop: 'workloadPlan',
          label: '计划量'
        },
        {
          prop: 'endTimePlan',
          label: '计划完工时间',
          width: 120
        },
        {
          prop: 'remark',
          label: '作业要求'
        },
      ],
      shipInfo: null, // 船舶计划行内容
      labourTableData: [], // 劳务
      labourColumns: [
        {
          prop: 'userNo',
          label: '工号'
        },
        {
          prop: 'operatorsName',
          label: '姓名'
        },
        {
          prop: 'deptName',
          label: '部门'
        },
        {
          prop: 'createName',
          label: '创建人',
        },
        {
          prop: 'createTime',
          label: '创建时间'
        },
      ],
      machineTableData: [], // 机械
      machineColumns: [
        {
          prop: 'equipmentTypeName',
          label: '机械类型',
        },
        {
          prop: 'equipmentNo',
          label: '机械编号',
        },
        {
          prop: 'position',
          label: '机械位置',
          render: (h,params) => {
            return h('span',{
              
            },params.row.position == '1' ? '前沿' : params.row.position == '2' ? '转运' : params.row.position == '3' ? '后场' : params.row.position == '4' ? '熏蒸库' : params.row.position == '5' ? '待检区' : '辅助'
            )
          }
        },
        {
          prop: 'operatorsName',
          label: '司机',
        },
        {
          prop: 'createName',
          label: '创建人',
        },
        {
          prop: 'createTime',
          label: '创建时间',
        },
      ],
      fumigationTableData: [], // 熏蒸
      fumigationColumns: [
        {
          prop: 'userNo',
          label: '工号'
        },
        {
          prop: 'operatorsName',
          label: '姓名'
        },
        {
          prop: 'deptName',
          label: '部门'
        },
        {
          prop: 'createName',
          label: '创建人',
        },
        {
          prop: 'createTime',
          label: '创建时间'
        },
      ],
      oddJobloading: false,
      openPortloading: false,
      oddJobTableData: [], // 零工
      oddJobColumns: [
        {
          prop: 'planNo',
          label: '编号',
          width: 120
        },
        {
          prop: 'processName',
          label: '作业过程',
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
          width: 120
        },
        {
          prop: 'cargoCategoryName',
          label: '货种',
        },
        {
          prop: 'workContent',
          label: '作业内容',
        },
        {
          prop: 'deptName',
          label: '作业工段',
        },
        {
          prop: 'supporting',
          label: '机械',
          width: 120,
        },
        {
          prop: 'laborDispatch',
          label: '劳务',
        },
        {
          prop: 'applyDeptName',
          label: '申请单位',
        },
        {
          prop: 'remark',
          label: '备注',
        },
      ],
      oddJobInfo: null, // 零工行内容
      openPortTableData: [], // 集疏港
      openPortColumns: [
        {
          prop: 'planNo',
          label: '编号',
          width: 140
        },
        {
          prop: 'processName',
          label: '作业过程'
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
          width: 120
        },
        {
          prop: 'cargoCategoryName',
          label: '货种'
        },
        {
          prop: 'customerName',
          label: '货代',
          isShort: true,
        },
        {
          prop: 'loadUnload',
          label: '装卸'
        },
        {
          prop: 'berthNo',
          label: '泊位'
        },
        {
          prop: 'storehouseName',
          label: '库场'
        },
        {
          prop: 'deptName',
          label: '作业工段',
          width: 130
        },
        {
          prop: 'cooperationName',
          label: '协力队',
          width: 130
        },
        {
          prop: 'tallyFront',
          label: '前沿',
          width: 130
        },
        {
          prop: 'transport',
          label: '转运',
          width: 130
        },
        {
          prop: 'tallyBack',
          label: '后场',
          width: 130
        },
        {
          prop: 'supporting',
          label: '辅助',
          width: 130
        },
        {
          prop: 'laborDispatch',
          label: '劳务',
          width: 130
        },
        {
          prop: 'foreignTallyCompanyName',
          label: '外理单位'
        },
        {
          prop: 'tallyClerk',
          label: '理货员',
          width: 130
        },
        {
          prop: 'instructorName',
          label: '指导员',
          width: 130
        },
        {
          prop: 'workloadPlan',
          label: '计划量'
        },
        {
          prop: 'endTimePlan',
          label: '计划完工时间',
          width: 120
        },
        {
          prop: 'remark',
          label: '作业要求'
        },
      ],
      openPortInfo: null, // 集疏港行内容
      isShow: false, // 显示机械配工
      isShowLabour: false, // 显示劳务派工界面
      labourInfo: null, // 劳务详情
      isShowFumigation: false, // 显示熏蒸页面
      transshipmentloading: false, // 转运loading
      transshipmentTableData: [], // 转运table
      transshipmentColumns: [
        {
          prop: 'planNo',
          label: '编号',
          width: 140
        },
        {
          prop: 'processName',
          label: '作业过程'
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
          width: 120
        },
        {
          prop: 'cargoCategoryName',
          label: '货种'
        },
        {
          prop: 'customerName',
          label: '货代',
          isShort: true,
        },
        {
          prop: 'loadUnload',
          label: '装卸'
        },
        {
          prop: 'berthNo',
          label: '泊位'
        },
        {
          prop: 'storehouseNameSource',
          label: '起始区域'
        },
        {
          prop: 'storehouseNameTarget',
          label: '终点区域'
        },
        {
          prop: 'deptName',
          label: '作业工段',
          width: 130
        },
        {
          prop: 'cooperationName',
          label: '协力队',
          width: 130
        },
        {
          prop: 'tallyFront',
          label: '前沿',
          width: 130
        },
        {
          prop: 'transport',
          label: '转运',
          width: 130
        },
        {
          prop: 'tallyBack',
          label: '后场',
          width: 130
        },
        {
          prop: 'supporting',
          label: '辅助',
          width: 130
        },
        {
          prop: 'laborDispatch',
          label: '劳务',
          width: 130
        },
        {
          prop: 'foreignTallyCompanyName',
          label: '外理单位'
        },
        {
          prop: 'tallyClerk',
          label: '理货员',
          width: 130
        },
        {
          prop: 'instructorName',
          label: '指导员',
          width: 130
        },
        {
          prop: 'workloadPlan',
          label: '计划量'
        },
        {
          prop: 'endTimePlan',
          label: '计划完工时间',
          width: 120
        },
        {
          prop: 'remark',
          label: '作业要求'
        },
      ],
      transshipmentInfo: null,
    }
  },
  activated() {
    //  日期默认当天
		let date = new Date()
		let theYear = date.getFullYear() //获取完整的年份(4位)
		let theMonth = date.getMonth() + 1 //获取当前月份(1-12,1代表1月)
		theMonth = theMonth >= 10 ? theMonth : "0" + theMonth
		let theDay = date.getDate() //获取当前日(1-31)
		theDay = theDay >= 10 ? theDay : "0" + theDay
    this.searchForm.workDate = theYear+'-'+theMonth+'-'+theDay
    this.getDictData()
  },
  methods: {
    // 查询字典信息
    getDictData () {
      publicapi.getDictData('SCHEDULE').then(res => {
        this.workTimeList = res.data.data.SCHEDULE
      })
    },
    // 查询
    searchData () {
      if (this.activeNameT == 'first') {
        this.searchShipPlan()
      } else if (this.activeNameT == 'second') {
        this.queryOddJob()
      } else if (this.activeNameT == 'third') {
        this.queryOpenPort()
      } else if (this.activeNameT == 'four') {
        this.querytransshipment()
      }
    },
    // 顶部tab页点击
    handleClick (val) {
      if (val == 'first') {
        this.searchShipPlan()
      } else if (val == 'second') {
        this.queryOddJob()
      } else if (val == 'third') {
        this.queryOpenPort()
      } else if (val == 'four') {
        this.querytransshipment()
      }
    },
    //查询船舶计划列表
    searchShipPlan () {
      this.loading = true
      let params = Object.assign({},this.searchForm)
      params.planType = '1'
      api.queryPlanType(params).then(res => {
        if (res.data.code != '0000') {
          this.$message.error(res.data.msg)
          return
        }
        this.loading = false
        this.tableData = res.data.data
        this.shipInfo = null
      })
    },
    // 查询零工计划
    queryOddJob () {
      this.oddJobloading = true
      let params = Object.assign({},this.searchForm)
      params.planType = '3'
      api.queryPlanType(params).then(res => {
        if (res.data.code != '0000') {
          this.$message.error(res.data.msg)
          return
        }
        this.oddJobloading = false
        this.oddJobTableData = res.data.data
        this.oddJobInfo = null
      })
    },
    // 查询集疏港计划
    queryOpenPort () {
      this.openPortloading = true
      let params = Object.assign({},this.searchForm)
      params.planType = '2'
      api.queryPlanType(params).then(res => {
        if (res.data.code != '0000') {
          this.$message.error(res.data.msg)
          return
        }
        this.openPortloading = false
        this.openPortTableData = res.data.data
        this.openPortInfo = null
      })
    },
    // 查询转运计划
    querytransshipment () {
      this.transshipmentloading = true
      let params = Object.assign({},this.searchForm)
      params.planType = '4'
      api.queryPlanType(params).then(res => {
        if (res.data.code != '0000') {
          this.$message.error(res.data.msg)
          return
        }
        this.transshipmentloading = false
        this.transshipmentTableData = res.data.data
        this.transshipmentInfo = null
      })
    },
    // 船舶计划点击行事件
    handlerClick (val) {
      console.log(val)
      this.shipInfo = val
      // 查询已派劳务 -- 停用
      // this.queryDispenserLabour(val)
      // 查询已派机械
      this.queryDispenserMachine(val.id)
      // 查询已派熏蒸 -- 停用
      // this.queryDispenserFumigation(val)
      // 查询全部劳务
      this.queryAllByLabour(val)
      // 查询全部熏蒸
      this.queryAllByFumigation(val)
      
    },
    // 底部tab页点击
    dhandleClick (val) {
      if (val == 'first') {

      } else if (val == 'second') {

      } else if (val == 'third') {

      }
    },
    // 点击零工行
    oddJobhandlerClick (val) {
      console.log(val)
      this.oddJobInfo = val
      // 查询已派劳务 -- 停用
      // this.queryDispenserLabour(val)
      // 查询已派机械
      this.queryDispenserMachine(val.id)
      // 查询已派熏蒸 - 停用
      // this.queryDispenserFumigation(val)
      // 查询全部劳务
      this.queryAllByLabour(val)
      // 查询全部熏蒸
      this.queryAllByFumigation(val)
    },
    // 点击集疏港行
    openPorthandlerClick (val) {
      console.log(val)
      this.openPortInfo = val
      // 查询已派劳务 -- 停用
      // this.queryDispenserLabour(val)
      // 查询已派机械
      this.queryDispenserMachine(val.id)
      // 查询已派熏蒸 -- 停用
      // this.queryDispenserFumigation(val)
      // 查询全部劳务
      this.queryAllByLabour(val)
      // 查询全部熏蒸
      this.queryAllByFumigation(val)
    },
    // 转运点击行事件
    transshipmenthandlerClick (val) {
      this.transshipmentInfo = val
      // 查询已派劳务 -- 停用
      // this.queryDispenserLabour(val)
      // 查询已派机械
      this.queryDispenserMachine(val.id)
      // 查询已派熏蒸 -- 停用
      // this.queryDispenserFumigation(val)
      // 查询全部劳务
      this.queryAllByLabour(val)
      // 查询全部熏蒸
      this.queryAllByFumigation(val)
    },
    // 机械配工按钮
    machineHandlerClick () {
      if (this.activeNameT == 'first' && this.shipInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'second' && this.oddJobInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'third' && this.openPortInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'four' && this.transshipmentInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'second') {
        this.shipInfo = this.oddJobInfo
      }
      if (this.activeNameT == 'third') {
        this.shipInfo = this.openPortInfo
      }
      if (this.activeNameT == 'four') {
        this.shipInfo = this.transshipmentInfo
      }
      this.isShow = true
    },
    // 劳务派工按钮
    labourHandlerClick () {
      if (this.activeNameT == 'first' && this.shipInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'second' && this.oddJobInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'third' && this.openPortInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'four' && this.transshipmentInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'first') {
        this.labourInfo = this.shipInfo
      } else if (this.activeNameT == 'second') {
        this.labourInfo = this.oddJobInfo
      } else if (this.activeNameT == 'third') {
        this.labourInfo = this.openPortInfo
      } else if (this.activeNameT == 'four') {
        this.shipInfo = this.transshipmentInfo
      }
      this.isShowLabour = true
    },
    // 熏蒸派工按钮
    fumigationHandlerClick () {
      if (this.activeNameT == 'first' && this.shipInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'second' && this.oddJobInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'third' && this.openPortInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'four' && this.transshipmentInfo == null) {
        return this.$message.warning('请先选择一条数据再配工')
      }
      if (this.activeNameT == 'first') {
        this.fumigationInfo = this.shipInfo
      } else if (this.activeNameT == 'second') {
        this.fumigationInfo = this.oddJobInfo
      } else if (this.activeNameT == 'third') {
        this.fumigationInfo = this.openPortInfo
      } else if (this.activeNameT == 'four') {
        this.shipInfo = this.transshipmentInfo
      }
      this.isShowFumigation = true
    },
    // 查询已派劳务信息
    queryDispenserLabour (val) {
      let params = {
        planId: val.id,
        dispatchType: '2'
      }
      api.queryById(params).then(res => {
        this.labourTableData = res.data.data
      })
    },
    // 查询已派熏蒸信息
    queryDispenserFumigation (val) {
      let params = {
        planId: val.id,
        dispatchType: '5'
      }
      api.queryById(params).then(res => {
        this.fumigationTableData = res.data.data
      })
    },
    // 查询已派机械信息
    queryDispenserMachine (id) {
      api.queryMechanicalDispatchAll(id).then(res => {
        if (res.data.code != '0000') {
          this.$message.error(res.data.msg)
        }
        this.machineTableData = res.data.data
      })
    },
    // 关闭抽屉
    colseDrawer () {
      this.isShowLabour = false
      this.isShowFumigation = false
      this.isShow = false
      this.searchData()
      this.labourTableData = []
      this.machineTableData = []
      this.fumigationTableData = []
    },
    // 查询全部劳务
    queryAllByLabour (val) {
      let params = {
        planId: val.id,
        dispatchType: '2',
      }
      api.queryAllById(params).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.labourTableData = res.data.data
      })
    },
    // 查询全部熏蒸
    queryAllByFumigation (val) {
      let params = {
        planId: val.id,
        dispatchType: '5',
      }
      api.queryAllById(params).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.fumigationTableData = res.data.data
      })
    },
  }
}
</script>
<style lang="less" scoped>
@import "../../../assets/searchfrom.less";
/deep/ .el-drawer__header{
  border-bottom: 1px solid rgb(230, 230, 230);
  background: rgb(250, 248, 248);
  padding: 20px 20px;
  margin-bottom: 1px;
}
</style>
